<template>
  <div class="container">
    <!-- 筛选 -->
    <el-card class="box-card">
      <el-row>
        <el-col :span="3">
          <div class="bg-purple-dark">
            <el-dropdown @command="stateType">
              <el-button type="primary" size="small"
                >{{ statetitle }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="i.num" v-for="(i, l) in stateCode" :key="l">{{ i.title }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="bg-purple-dark">
            <el-dropdown @command="queryBrand">
              <el-button type="primary" size="small"
                >{{ brandtitle }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="i" v-for="(i, l) in brand" :key="l">{{ i }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="bg-purple-dark">
            <el-dropdown @command="queryType">
              <el-button type="primary" size="small"
                >{{ querytype }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="i" v-for="(i, l) in type" :key="l">{{ i }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="bg-purple-dark">
            <el-input placeholder="点击左侧切换搜索方式" v-model="input1" @keyup.enter.native="queryId">
              <el-button v-if="isstatu" slot="prepend" @click.native="isstatu = !isstatu"
                >发布编号<i class="el-icon-refresh"></i>
              </el-button>
              <el-button v-else slot="prepend" @click.native="isstatu = !isstatu"
                >车辆编号<i class="el-icon-refresh"></i
              ></el-button>
              <el-button slot="append" class="el-icon-search" @click="queryId"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 详细信息 -->
    <el-card class="box-card">
      <el-row class="margin">
        <el-col :span="4"><div class="grid-content margin_right">车辆照片</div></el-col>
        <el-col :span="5"><div class="grid-content">发布/卖出信息</div></el-col>
        <el-col :span="7"><div class="grid-content">车辆信息</div></el-col>
        <el-col :span="4"><div class="grid-content">用户信息</div></el-col>
        <el-col :span="4"><div class="grid-content">操作</div></el-col>
      </el-row>
      <el-row class="buttom" v-for="(i, l) in tableData" :key="l" :class="{ top: l == 0 }">
        <el-col :span="4" class="margin-left margin-top">
          <div class="img">
            <el-image
              :src="'http://www.yocar.website:8080/yoche/img/' + i.car.photo[0]"
              style="width: 225px; height: 151px"
              fit="cover"
            ></el-image>
            <!-- <img :src="'http://www.yocar.website:8080/yoche/img/' + i.car.photo[0]" alt="" /> -->
          </div>
        </el-col>
        <el-col :span="5" class="margin-top">
          <el-descriptions :column="1">
            <el-descriptions-item label="发布编号">{{ i.id }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ i.state }}</el-descriptions-item>
            <el-descriptions-item label="时间" :span="2">{{ i.published_time | data }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="7" class="margin-top">
          <el-descriptions :column="2">
            <el-descriptions-item label="车辆ID">{{ i.car.id }}</el-descriptions-item>
            <el-descriptions-item label="品牌">{{ i.car.brand }}</el-descriptions-item>
            <el-descriptions-item label="系别">{{ i.car.type }}</el-descriptions-item>
            <el-descriptions-item label="类型">{{ i.car.model }}</el-descriptions-item>
            <el-descriptions-item label="价格">{{ i.car.price }}万元</el-descriptions-item>
            <el-descriptions-item label="排量">{{ i.car.displacement }}</el-descriptions-item>
            <el-descriptions-item label="上牌时间" :span="2">{{ i.car.card_time | data }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="4" class="margin-top">
          <el-descriptions :column="1">
            <el-descriptions-item label="用户ID">{{ i.user.id }}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{ i.user.nickname }}</el-descriptions-item>
            <el-descriptions-item label="姓氏">{{ i.user.surname }}</el-descriptions-item>
            <el-descriptions-item label="手机">{{ i.user.phone }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="4" class="margin-top">
          <div class="button_operation">
            <el-button type="danger" @click="deleteItem(i)">删除</el-button>
          </div>
        </el-col>
      </el-row>

      <div class="radio">
        <el-button size="mini" @click="radio2 = 1">首页</el-button>
        <el-button size="mini" @click="radio2--">上一页</el-button>
        <el-button size="mini" @click="radio2++">下一页</el-button>
        <el-button size="mini" @click="radio2 = 4">尾页</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { queryPersonal, searchPersonal, deletePersonal } from '@/api/cart'
export default {
  name: 'PersonCard',
  data() {
    return {
      querytype: '类型',
      brandtitle: '品牌',
      statetitle: '已发布', // 状态
      type: ['轿车', 'SUV', '跑车', '面包车'],
      brand: ['奔驰', '宝马', '大众', '奥迪', '福特', '现代', '丰田', '保时捷'],
      stateCode: [
        { title: '已发布', num: 1, value: 0 },
        { title: '已卖出', num: 2, value: 0 },
        { title: '草稿', num: 3, value: 0 }
      ],
      scoperow: {},
      userinfo: [],
      visible: false,
      isstatu: true, // true为发布编号
      radio2: 1,
      gridData: [],
      input1: '',
      radio1: 1,
      radio3: 1,
      queryData: {
        stateCode: 1, //状态
        brand: '', //品牌
        model: '', //类型
        pageNum: 1, //默认当前页码
        pageSize: 10 //默认单页数量
      },
      tableData: []
    }
  },
  watch: {
    // 跳转页
    radio2: function (value) {
      if (value < 1) {
        this.radio2 = 1
      } else {
        this.queryData.pageNum = value
      }
    },
    queryData: {
      handler(newName) {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        console.log(newName)
        this.queryAllUser()
      },
      // immediate: true, //刷新加载 立马触发一次handler/
      deep: true // 可以深度检测到 obj 对象的属性值的变化
    }
  },
  components: {},
  methods: {
    //状态
    stateType(i) {
      this.queryData.stateCode = i
      this.stateCode.forEach(element => {
        if (element.num == i) {
          this.statetitle = element.title
        }
      })
      this.queryAllUser()
    },
    // 删除
    async deleteItem(item) {
      const carid = item.car.id
      const res = await deletePersonal({ id: carid })
      if (res.data.statu == 200) {
        this.$message.success(res.data.msg)
        this.queryAllUser()
      } else {
        this.$message.warning(res.data.msg)
      }
    },
    // 查询
    async queryId() {
      const searchCode = this.isstatu ? 1 : 2
      const res = await searchPersonal({ id: this.input1, searchCode: searchCode })
      if (res.data.data) {
        console.log(res)
        this.tableData = []
        this.tableData.push(res.data.data)
        this.tableData = this.tableData.map(item => {
          item.car.photo = item.car.photo.split('#')
          return item
        })
      } else {
        this.$message.warning('查询不到车辆信息')
      }
    },
    //类型
    queryType(item) {
      this.queryData.model = item
      this.querytype = item
    },
    // 品牌
    queryBrand(item) {
      this.queryData.brand = item
      this.brandtitle = item
    },
    //根据状态筛选车辆
    async queryAllUser() {
      const res = queryPersonal({ ...this.queryData })
      res.then(data => {
        const list = data.data
        console.log(list)

        if (list.statu == 200) {
          this.tableData = list.data.map(item => {
            item.car.photo = item.car.photo.split('#')
            return item
          })
        }
      })
    }
  },
  created() {
    this.queryAllUser()
  },
  filters: {
    data: value => {
      const year = new Date(value).getFullYear()
      let month = new Date(value).getMonth() + 1
      let date = new Date(value).getDate()
      return year + '-' + month + '-' + date
    }
  }
}
</script>
<style lang="less" scoped>
.item {
  margin-right: 20px;
}
.grid-small {
  margin-top: 6px;
}
.radio {
  margin: 20px 20px 0 0;
}
.box-card {
  margin-top: 5px;
}
.scope {
  display: flex;
  justify-content: space-around;
}
.margin-top {
  border-right: 1px solid #c1c1c1;
  height: 155px;
  padding-left: 13px;
  padding-top: 15px;
}
.margin-left {
  border-left: 1px solid #c1c1c1;
  padding-top: 0px;
}
.top {
  border-top: 1px solid #c1c1c1;
}
.buttom {
  border-bottom: 1px solid #c1c1c1;
  width: 1526px;
}
.margin {
  width: 1526px;
}
.grid-content {
  border-right: 1px solid #c1c1c1;
  border-top: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
  text-align: center;
  padding: 10px;
  font-weight: 700;
}
.margin_right {
  border-left: 1px solid #c1c1c1;
}
.phone {
  padding: 20px 0 0 10px;
}
.button_operation {
  vertical-align: middle;
  padding-top: 45px;
  padding-left: 50px;
}
.img {
  height: 136px;
  padding: 2px;
}
</style>
